<extend name="work/base"/>
<block name="content">
    <script type="text/javascript" src="https://cdn.weibuyun.com/static/admin/js/echarts.min.js"></script>
            <div class="layui-tab layui-tab-brief" lay-filter="projecttab">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="1">概况</li>
                    <li lay-id="2">项目视图</li>
                    <li lay-id="3">工作热点</li>
                    <li lay-id="4">工作视图</li>
                </ul>
                <div class="layui-tab-content" style="background-color: #f2f2f2">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md12">
                                <div class="layui-card">
                                    <div class="layui-card-header"><i class="layui-icon layui-icon-log"
                                                                      style="font-size: 20px; color: #FFB800;"></i> 工作考勤
                                    </div>
                                    <div class="layui-card-body">
                                        <blockquote class="layui-elem-quote layui-quote-nm">
                                            {:config('param.work_time')}
                                        </blockquote>
                                        <div class="layui-btn-group">
                                            <button type="button"
                                                    class="logins layui-btn layui-btn-normal <notempty name='login.am_in' > layui-btn-disabled</notempty>"
                                                    data="am_in">上午签到 {$login.am_in|default='--:--'}
                                            </button>
                                            <button type="button"
                                                    class="logins layui-btn layui-btn-normal <notempty name='login.am_out' > layui-btn-disabled</notempty>"
                                                    data="am_out">上午签退 {$login.am_out|default='--:--'}
                                            </button>
                                        </div>

                                        <div class="layui-btn-group">
                                            <button type="button"
                                                    class="logins layui-btn layui-btn-normal <notempty name='login.fm_in' > layui-btn-disabled</notempty>"
                                                    data="fm_in">下午签到 {$login.fm_in|default='--:--'}
                                            </button>
                                            <button type="button"
                                                    class="logins layui-btn layui-btn-normal <notempty name='login.fm_out' > layui-btn-disabled</notempty>"
                                                    data="fm_out">下午签退 {$login.fm_out|default='--:--'}
                                            </button>
                                        </div>
                                        <div class="layui-btn-group">
                                            <button type="button"
                                                    class="layui-btn layui-btn-normal layui-btn-warm  ajax-form"
                                                    data-url="{:url('add_no_time')}">请假
                                            </button>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">最近放假日期</div>
                                    <div class="layui-card-body">
                                        <table id="festival" lay-filter="festival"
                                               list-url="{:url('festivallists')}">
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">平台信息</div>
                                    <div class="layui-card-body" style="height: 430px;">
                                        <div class="layui-btn-container">
                                            <table class="layui-table">
                                                <colgroup>
                                                    <col width="200">
                                                </colgroup>
                                                <tbody>
                                                <tr>
                                                    <td>项目总数</td>
                                                    <td>{$sof.project_num}</td>
                                                </tr>
                                                <tr>
                                                    <td>项目需求总数</td>
                                                    <td>{$sof.model1_num}</td>
                                                </tr>
                                                <tr>
                                                    <td>项目缺陷总数</td>
                                                    <td>{$sof.model2_num}</td>
                                                </tr>
                                                <tr>
                                                    <td>项目迭代总数</td>
                                                    <td>{$sof.model3_num}</td>
                                                </tr>
                                                <tr>
                                                    <td>项目模块讨论总数</td>
                                                    <td>{$sof.comment_num}</td>
                                                </tr>
                                                <tr>
                                                    <td>项目文档总数</td>
                                                    <td>{$sof.doc_num}</td>
                                                </tr>
                                                <tr>
                                                    <td>项目文档讨论总数</td>
                                                    <td>{$sof.doccomment_num}</td>
                                                </tr>
                                                <tr>
                                                    <td>开发人员总数</td>
                                                    <td>{$sof.dev_num}</td>
                                                </tr>
                                                <tr>
                                                    <td>甲方人员总数</td>
                                                    <td>{$sof.jia_num}</td>
                                                </tr>
                                                <tr>
                                                    <td>微信模板消息最后推送时间</td>
                                                    <td>{$sof.wx_time}</td>
                                                </tr>
                                                <tr>
                                                    <td>附件扫描最后时间</td>
                                                    <td>--</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item ">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md4">
                                <div class="layui-card">
                                    <div class="layui-card-header">项目信息</div>
                                    <div class="layui-card-body">
                                        <div id="treeproject" style="height:590px;overflow-y :auto;"></div>
                                    </div>
                                </div>

                            </div>
                            <div class="layui-col-md8">
                                <div class="layui-row layui-col-space10">
                                    <div class="layui-col-md12">
                                        <div class="layui-card">
                                            <div class="layui-card-body">
                                                <div id="projectbar" style="height:300px;"></div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="layui-col-md12">
                                        <div class="layui-card">
                                            <div class="layui-card-body">
                                                <div id="projectradar" style="height:300px;"></div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item ">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md12">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div class="layui-btn-container">
                                            <volist name="userlist" id="vo">
                                                <button type="button" class="layui-btn layui-btn-normal finish"
                                                        uid="{$vo.id}">
                                                    {$vo.nickname}
                                                </button>
                                            </volist>
                                        </div>
                                        <div id="userlist" style="height:500px;"></div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>
                    <div class="layui-tab-item ">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div class="layui-btn-container">
                                    <volist name="userlist" id="vo">
                                        <button type="button" class="layui-btn layui-btn-normal workcalendar"
                                                uid="{$vo.id}">
                                            {$vo.nickname}
                                        </button>
                                    </volist>
                                </div>
                                <div class="layui-card-header titleright"></div>
                                <div id="calendar"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
</block>
<block name="script">
    <link href='https://cdn.weibuyun.com/static/admin/fullcalendar/core/main.min.css' rel='stylesheet'/>
    <link href='https://cdn.weibuyun.com/static/admin/fullcalendar/daygrid/main.min.css' rel='stylesheet'/>
    <link href='https://cdn.weibuyun.com/static/admin/fullcalendar/timegrid/main.min.css' rel='stylesheet'/>
    <script src='https://cdn.weibuyun.com/static/admin/fullcalendar/core/main.min.js'></script>
    <script src='https://cdn.weibuyun.com/static/admin/fullcalendar/timegrid/main.min.js'></script>
    <script src='https://cdn.weibuyun.com/static/admin/fullcalendar/interaction/main.min.js'></script>
    <script src='https://cdn.weibuyun.com/static/admin/fullcalendar/daygrid/main.min.js'></script>
    <script src='https://cdn.weibuyun.com/static/admin/fullcalendar/core/locales/zh-cn.js'></script>
    <script>
        layui.use(['element', 'table', 'form', 'tree'], function () {
            var table = layui.table
                , $ = layui.$
                , element = layui.element
                , tree = layui.tree
                , form = layui.form;
            var uid = 0;

            element.on('tab(projecttab)', function () {
                switch (Number(this.getAttribute('lay-id'))) {
                    case 1:
                        break;
                    case 2:
                        var fdom = document.getElementById("projectbar");
                        var fmyChart = echarts.init(fdom, 'light');
                        var fdom2 = document.getElementById("projectradar");
                        var fmyChart2 = echarts.init(fdom2, 'light');
                        getfinish(0);
                        treecategory(0);
                         function getfinish(project_id) {
                        $.ajax({
                            url: "{:url('getprojectbar')}",
                            type: 'get',
                            dataType: 'json',
                            data: {
                                project_id: project_id
                            }
                        })
                            .done(function (res) {
                                if (res.data == null) {
                                    layer.msg('没有内容', {
                                        time: 1500,
                                        icon: 5
                                    });
                                } else {
                                    option = {
                                        title: {
                                            text: res.data.project_name + '条形图',
                                            textStyle: {
                                                color: '#999',
                                                fontSize: 14,
                                            }

                                        },
                                        tooltip: {
                                            trigger: 'axis',
                                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                            }
                                        },
                                        legend: {
                                            data: ['未完成', '完成'],
                                            right: 5,
                                        },
                                        grid: {
                                            left: '3%',
                                            right: '4%',
                                            bottom: '3%',
                                            containLabel: true
                                        },
                                        xAxis: {
                                            type: 'value'
                                        },
                                        yAxis: {
                                            type: 'category',
                                            data: ['需求', '缺陷', '迭代']
                                        },
                                        series: [
                                            {
                                                name: '未完成',
                                                type: 'bar',
                                                stack: '总量',
                                                label: {
                                                    normal: {
                                                        show: true,
                                                        position: 'insideRight'
                                                    }
                                                },
                                                data: [res.data.m_1.no, res.data.m_2.no, res.data.m_3.no]
                                            },
                                            {
                                                name: '完成',
                                                type: 'bar',
                                                stack: '总量',
                                                label: {
                                                    normal: {
                                                        show: true,
                                                        position: 'insideRight'
                                                    }
                                                },
                                                data: [res.data.m_1.yes, res.data.m_2.yes, res.data.m_3.yes]
                                            }
                                        ]
                                    };
                                    //console.log(res.data);
                                    fmyChart.setOption(option, true);

                                    option2 = {
                                        title: {
                                            text: res.data.project_name + '雷达图',
                                            textStyle: {
                                                color: '#999',
                                                fontSize: 14,
                                            }
                                        },
                                        tooltip: {},
                                        legend: {
                                            data: ['应完成', '实际完成'],
                                            right: 5
                                        },
                                        radar: {
                                            // shape: 'circle',
                                            name: {
                                                textStyle: {
                                                    color: '#fff',
                                                    backgroundColor: '#999',
                                                    borderRadius: 3,
                                                    padding: [3, 5]
                                                }
                                            },
                                            center: ['50%', '65%'],
                                            indicator: [
                                                {name: '需求', max: 100},
                                                {name: '缺陷', max: 100},
                                                {name: '迭代', max: 100},
                                            ]
                                        },
                                        series: [{
                                            type: 'radar',
                                            // areaStyle: {normal: {}},
                                            data: [
                                                {
                                                    value: [100, 100, 100],
                                                    name: '应完成'
                                                },
                                                {
                                                    value: [res.data.m_1.p, res.data.m_2.p, res.data.m_3.p],
                                                    name: '实际完成'
                                                }
                                            ]
                                        }]
                                    };
                                    fmyChart2.setOption(option2, true);

                                }
                            })
                            .fail(function () {
                                layer.msg('服务器异常', {
                                    time: 1500,
                                    icon: 5
                                });
                            })
                            .always(function () {

                            });
                    }
                        function treecategory() {
                        $.ajax({
                            url: "{:url('treeproject')}",
                            type: 'get',
                            dataType: 'json',

                        })
                            .done(function (res) {
                                if (res.data == null) {
                                    layer.msg('没有内容', {
                                        time: 1500,
                                        icon: 5
                                    });
                                } else {
                                    tree.render({
                                        elem: '#treeproject'  //绑定元素
                                        , id: 'treeproject'
                                        , data: res.data
                                        , click: function (obj) {
                                            //console.log(obj.data)
                                            getfinish(obj.data.id);
                                            return false;
                                        }
                                    });
                                }
                            })
                            .fail(function () {
                                layer.msg('服务器异常', {
                                    time: 1500,
                                    icon: 5
                                });
                            })
                            .always(function () {

                            });

                    }
                        break;
                    case 3:
                        var fdom3 = document.getElementById("userlist");
                        var fmyChart3 = echarts.init(fdom3, 'light');
                        $('.finish').click(function () {
                            getuserfinish($(this).attr('uid'));
                        });
                        getuserfinish(0);
                        function getuserfinish(uid) {
                        $.ajax({
                            url: "{:url('getuserfinish')}",
                            type: 'get',
                            dataType: 'json',
                            data: {
                                uid: uid
                            }
                        })
                            .done(function (res) {
                                if (res.data == null) {
                                    layer.msg('没有内容', {
                                        time: 1500,
                                        icon: 5
                                    });
                                } else {
                                    var Data = [];
                                    $.each(res.data.data, function (i, n) {
                                        Data.push([n.c_time, n.w_time]);
                                    });
                                    option = {
                                        title: {
                                            text: '开发名称' + res.data.nickname,
                                            textStyle: {
                                                color: '#999',
                                                fontSize: 14,
                                            },
                                            right: 15
                                        },
                                        tooltip: {
                                            position: 'top'
                                        },
                                        calendar: [
                                            {
                                                orient: 'horizontal',
                                                yearLabel: {
                                                    margin: 60
                                                },
                                                dayLabel: {
                                                    firstDay: 1,
                                                    nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
                                                },
                                                monthLabel: {
                                                    nameMap: 'cn',
                                                    margin: 25
                                                },
                                                cellSize: 55,
                                                left: 120,
                                                range: [res.data.sm, res.data.em]
                                            }],

                                        series: [{
                                            type: 'effectScatter',
                                            coordinateSystem: 'calendar',
                                            calendarIndex: 0,
                                            symbolSize: function (val) {
                                                return val[1] * 3;
                                            },
                                            data: Data
                                        }]
                                    };
                                    fmyChart3.setOption(option, true);
                                }
                            })
                            .fail(function () {
                                layer.msg('服务器异常', {
                                    time: 1500,
                                    icon: 5
                                });
                            })
                            .always(function () {

                            });
                    }
                        break;
                    case 4:
                        //日历
                        $('#calendar').html('');
                        var calendarEl = document.getElementById('calendar');
                        var calendar = new FullCalendar.Calendar(calendarEl, {
                            plugins: ['interaction', 'dayGrid', 'timeGrid'],
                            header: {
                                left: 'prev,next today',
                                center: 'title',
                                right: 'dayGridMonth,dayGridWeek,dayGridDay'
                            },
                            // defaultDate: '2019-06-12',
                            navLinks: true, // can click day/week names to navigate views
                            //允许用户通过点击或拖动选择日历中的对象
                            //selectable: true,
                            locale: 'zh-cn',
                            //selectMirror: true,
                            //editable: true,
                            //eventLimit: true,
                            //绑定一个mothod,在点击日历时可以弹出页面
                            //点击添加的事件触发的方法
                            //进入日历界面进行加载添加过的数据
                            events: function (fetchInfo, successCallback, failureCallback) {
                                var events = [];
                                $.ajax({
                                    url: "{:url('getcalendar')}",
                                    type: 'post',
                                    dataType: 'json',
                                    data: {
                                        start: fetchInfo.startStr,
                                        end: fetchInfo.endStr,
                                        uid: uid
                                    }
                                })
                                    .done(function (res) {
                                        if (res.data == null) {
                                            layer.msg('没有内容', {
                                                time: 1500,
                                                icon: 5
                                            });
                                        } else {
                                            if (res.nickname) {
                                                $('.titleright').html('开发名称' + res.nickname)
                                            } else {
                                                $('.titleright').html('')
                                            }
                                            $.each(res.data, function (i, j) {
                                                switch (j.status) {
                                                    case 1:
                                                    case 2:
                                                        cl = '#FFB800'
                                                        break;
                                                    case 3:
                                                    case 4:
                                                        cl = '#1E9FFF'
                                                        break;
                                                    case 5:
                                                        cl = '#c2c2c2'
                                                        break;
                                                    default:
                                                        cl = '#01AAED'
                                                        break;

                                                }
                                                events.push({
                                                    title: j.title,
                                                    start: j.start,           // will be parsed
                                                    end: j.end,
                                                    color: cl
                                                });
                                            })
                                           // console.log(events);
                                            //回调渲染日历
                                            successCallback(events);
                                        }
                                    })
                                    .fail(function () {
                                        layer.msg('服务器异常', {
                                            time: 1500,
                                            icon: 5
                                        });
                                    })
                                    .always(function () {

                                    });
                            }
                        });
                        $('.workcalendar').click(function () {
                            //initFullCalendar($(this).attr('uid'));
                            uid = $(this).attr('uid');
                            calendar.refetchEvents();
                        });

                        calendar.render();
                        break;
                    default:
                }
            });


            //假期
            table.render({
                elem: '#festival'
                , url: "{:Url('festivallists')}"
                , page: {
                    layout: ['prev', 'next'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , prev: '上一页'
                    , next: '下一页'
                }
                , height: 400
                , limit: 8
                , text: '最近的假期还没有添加'
                , cols: [[
                    {field: 'd_time', width: 130, title: '节假日期'}
                    , {field: 'info', title: '节假日名称'}
                ]]
            });

            $('.logins').click(function () {
                //initFullCalendar($(this).attr('uid'));
                var obj = this;

                if ($(obj).is('.layui-btn-disabled')) {
                    layer.msg('已经提交过', {
                        time: 1500,
                        icon: 5
                    });
                    return;
                }
                $.ajax({
                    url: "{:url('savelogin')}",
                    type: 'get',
                    dataType: 'json',
                    data: {
                        data: $(obj).attr('data')

                    }
                })
                    .done(function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                icon: 1
                            });
                            $(obj).addClass('layui-btn-disabled');
                            $(obj).html(res.data);

                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });
            });


        });
    </script>
</block>